<template>
    <div class="service-mesh" @click="$router.push(`/instances/${ service }`)">
        <section class="brief-info">
            <img v-if="status === 'UP'" src="@/assets/img/up@1x.png" title="up" />
            <img v-if="status === 'DOWN'" src="@/assets/img/down@1x.png" title="down" />
            <img v-if="status === 'OFFLINE'" src="@/assets/img/offline@1x.png" title="offline" />

            <div class="information">
                <span>{{ service }}</span>
                <span>实例数: {{ instance }}</span>
            </div>
        </section>

        <section class="stat-info">
            <div class="stat-container">
                <span>UP</span>
                <span>{{ up }}</span>
            </div>
            <div class="stat-container">
                <span>DOWN</span>
                <span>{{ down }}</span>
            </div>
            <div class="stat-container">
                <span>OFFLINE</span>
                <span>{{ offline }}</span>
            </div>
        </section>
    </div>
</template>

<script>
    export default {
        name: 'ServiceMesh',
        props: {
            service: String,
            instance: Number,
            status: String,
            up: Number,
            down: Number,
            offline: Number,
        },
    };
</script>

<style lang="scss" scoped>
    .service-mesh {
        float: left;
        display: flex;
        flex-direction: column;
        margin-right: 2.8%;
        margin-bottom: 2.8%;
        padding: 1%;
        width: 22.9%;
        background: #FFF;
        border-radius: 8px;
        box-shadow: 0 0 10px 0 rgba(226, 232, 237, .5);
        cursor: pointer;

        &:nth-of-type(4n) {
            margin-right: 0;
        }

        & > .brief-info {
            display: flex;
            flex-direction: row;

            & > img {
                margin-right: 3%;
                width: 76px;
                height: 76px;
            }

            & > .information {
                display: flex;
                flex-direction: column;
                margin-top: 10px;
                width: 70%;

                & > span {
                    margin-bottom: 3px;
                    font-size: 16px;
                    font-weight: 400;
                    color: rgba(0, 0, 0, .85);
                }
            }
        }

        & > .stat-info {
            margin-top: 8%;
            border: 1px solid #D9E1E8;
            border-bottom: 0;
            border-radius: 4px;

            & > .stat-container {
                display: flex;
                flex-direction: column;
                float: left;
                width: 33.3%;
                height: 75px;
                border-right: 1px solid #D9E1E8;
                border-bottom: 1px solid #D9E1E8;

                &:nth-of-type(3n) {
                    border-right: 0;
                }

                & > span {
                    margin: auto;
                    font-size: 12px;
                    font-weight: 500;
                    color: rgba(0, 0, 0, .45);

                    &:nth-of-type(2) {
                        margin-top: 0;
                        font-size: 16px;
                        font-weight: 400;
                        color: rgba(0, 0, 0, .85);
                    }
                }
            }
        }
    }
</style>
